<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>掘金终极复刻版</title>
  <style>
    /* 精准导航栏样式 */
    .nav {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      padding: 0 24px;
      z-index: 1000;
      gap: 40px;
    }
    .nav-brand {
      color: #1e80ff !important;
      font-size: 24px;
      font-weight: 500;
      cursor: pointer;
    }
    .nav-buttons {
      display: flex;
      gap: 28px;
    }
    .nav-button {
      background: none;
      border: none;
      padding: 8px 0;
      font-size: 15px;
      color: #71777c;
      cursor: pointer;
      position: relative;
    }
    .nav-button.active::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 100%;
      height: 3px;
      background: #1e80ff;
    }
    .nav-search {
      width: 240px;
      height: 36px;
      margin-left: auto;
      border: 1px solid #e5e6eb;
      border-radius: 18px;
      padding: 0 16px;
      background: #f7f8fa;
    }
    .creator-center {
      background: #f2f3f5;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 14px;
    }

    /* 精准三栏布局 */
    main {
      display: flex;
      gap: 24px;
      max-width: 1440px;
      margin: 80px auto 0;
      padding: 0 24px;
    }
    .left-side {
      width: 200px;
      position: sticky;
      top: 80px;
      height: fit-content;
    }
    .main-content {
      flex: 1;
      min-width: 0;
    }
    .right-side {
      width: 300px;
      position: sticky;
      top: 80px;
    }

    /* 左侧导航精准交互 */
    .category-list button {
      width: 100%;
      padding: 12px;
      text-align: left;
      border: none;
      background: none;
      border-radius: 4px;
      margin: 4px 0;
      cursor: pointer;
    }
    .category-list button.active {
      background: #e8f3ff;
      color: #1e80ff;
      font-weight: 500;
    }

    /* 文章卡片样式 */
    .article-card {
      background: #fff;
      padding: 20px;
      margin-bottom: 16px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .article-tags {
      display: flex;
      gap: 8px;
      margin: 12px 0;
    }
    .tag {
      padding: 4px 12px;
      background: #f2f3f5;
      border-radius: 14px;
      font-size: 13px;
    }
    /* 新增样式 */
    .tab-buttons {
      margin-bottom: 24px;
      border-bottom: 1px solid #f2f3f5;
    }
    .tab-button {
      border: none;
      background: none;
      padding: 12px 16px;
      font-size: 15px;
      color: #86909c;
      cursor: pointer;
      position: relative;
    }
    .tab-button.active {
      color: #1e80ff;
      background: #e8f3ff;
      border-radius: 4px 4px 0 0;
    }
    .tab-button.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #1e80ff;
    }

    /* 调整注册按钮间距 */
    .nav-buttons button[style*="1e80ff"] {
      margin-left: 12px;
      font-weight: 500;
    }
  </style>
</head>
<body>
<!-- 精准导航栏 -->
<nav class="nav">
  <div class="nav-brand">稀土掘金</div>
  <div class="nav-buttons">
    <button class="nav-button active">首页</button>
    <button class="nav-button">AI Coding</button>
    <button class="nav-button">沸点</button>
    <button class="nav-button">课程</button>
    <button class="nav-button">直播</button>
    <button class="nav-button">活动</button>
  </div>
  <input type="search" class="nav-search" placeholder="探索稀土掘金">
  <div class="nav-buttons" style="margin-left: auto;gap: 20px;">
    <div class="creator-center">创作者中心</div>
    <button class="nav-button">会员</button>
    <button class="nav-button">登录</button>
    <button class="nav-button" style="color: #1e80ff;margin-left: 8px;">注册</button>
    <button class="nav-button" style="color: #1e80ff;margin-left: 8px;">注册</button>
  </div>
</nav>

<!-- 主体内容 -->
<main>
  <!-- 左侧导航 -->
  <div class="left-side">
    <div class="category-list">
      <button class="active">综合</button>
      <button>后端</button>
      <button>前端</button>
      <button>Android</button>
      <button>iOS</button>
      <button>人工智能</button>
      <button>工具工人</button>
      <button>代码人生</button>
      <button>阅读</button>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="main-content">
    <!-- 修改推荐/最新切换按钮 -->
    <div class="tab-buttons">
      <button class="tab-button active">推荐</button>
      <button class="tab-button">最新</button>
    </div>

    <div class="article-card">
      <h2>掘金 x Trae「超级体验官」创新实践征文</h2>
      <div class="article-tags">
        <div class="tag">Trae</div>
        <div class="tag">AI编程</div>
        <div class="tag">征文活动</div>
      </div>
      <p style="color: #86909c;margin: 12px 0;">Trae，致力于成为真正的AI工程师(The Real Al Engineer)...</p>
      <div style="display: flex;gap: 24px;color: #86909c;">
        <span>Trae首席推荐官</span>
        <span>1.4k 阅读</span>
        <span>38 赞</span>
        <span>2小时前</span>
      </div>
    </div>

    <!-- 更多文章... -->
    <div class="article-card">
      <h2>如何将39.3k的开源知识库Dify接入微信</h2>
      <div class="article-tags">
        <div class="tag">微信开发</div>
        <div class="tag">Dify</div>
      </div>
      <p style="color: #86909c;margin: 12px 0;">在渐渐熟悉Dify的各个功能后，我们已经不满足于只在PC端使用...</p>
      <div style="display: flex;gap: 24px;color: #86909c;">
        <span>三金得鑫</span>
        <span>8.2k 阅读</span>
        <span>45 赞</span>
        <span>5小时前</span>
      </div>
    </div>
  </div>

  <!-- 右侧边栏 -->
  <div class="right-side">
    <div class="article-card">
      <h3>上午好！</h3>
      <button style="background: #1e80ff;color: white;border: none;padding: 8px 24px;border-radius: 6px;margin: 12px 0;">去签到</button>
      <h4 style="margin: 16px 0;">热门文章榜</h4>
      <ul style="list-style: none;padding: 0;">
        <li style="padding: 12px 0;border-bottom: 1px solid #f2f3f5;">
          <a href="#" style="text-decoration: none;color: #1d2129;">尤雨溪响应式设计演进解析</a>
        </li>
        <li style="padding: 12px 0;border-bottom: 1px solid #f2f3f5;">
          <a href="#" style="text-decoration: none;color: #1d2129;">前端开发新趋势分析</a>
        </li>
        <!-- 更多榜单条目... -->
      </ul>
    </div>
  </div>
</main>

<script>
  // 导航按钮交互
  document.querySelectorAll('.nav-button').forEach(button => {
    button.addEventListener('click', function() {
      document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
    });
  });

  // 分类导航交互
  document.querySelectorAll('.category-list button').forEach(button => {
    button.addEventListener('click', function() {
      document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
    });
  });
  // 新增切换按钮交互
  document.querySelectorAll('.tab-button').forEach(button => {
    button.addEventListener('click', function() {
      document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
    });
  });
</script>
</body>
</html>